import React, { useEffect,useState } from 'react'
import { Menu } from 'antd';
import {useNavigate,useLocation} from 'react-router-dom'
import { UnorderedListOutlined, FormOutlined, HighlightOutlined } from 
'@ant-design/icons';

export default function Aside() {
    //Hooks必须写在组件顶级
    const navigate = useNavigate()
    const location = useLocation()
    const [defaultkey,setDefaultkey] = useState('')

    //一般加一个空数组就是为了模仿componentDidMounted
    useEffect(()=>{
        //拿到地址
        // console.log(location.pathname)

        let path = location.pathname;
        // console.log(path.split('/')[1]);  //  split（）   '/edit' 斜杠为分界拿到后面字符串
        let key = path.split('/')[1];
        setDefaultkey(key)
    },[location.pathname])

    //点击时跳转
    const handleClick = e =>{
        // console.log('/'+e.key);
        navigate('/'+e.key)
        setDefaultkey(e.key)
    };

    return (
        <Menu
            onClick={handleClick}
            style={{ width: 180 }}
            selectedKeys={[defaultkey]}
            mode="inline"
            className='aside'
            theme="dark"
        >
            <Menu.Item key="listlist"><UnorderedListOutlined /> 查看文章列表List</Menu.Item>
            <Menu.Item key="listtable"><UnorderedListOutlined /> 查看文章列表Table</Menu.Item>
            <Menu.Item key="edit"><FormOutlined /> 文章编辑</Menu.Item>
            <Menu.Item key="means"><HighlightOutlined /> 修改资料</Menu.Item>
        </Menu>
    )
}